<!--
 * @Description: 上方选项
 * @Date: 2024-04-28 15:09:44
 * @LastEditTime: 2024-04-28 15:12:01
 * @FilePath: \brush-question-nodef:\brush_ques\brush-question-app\components\top-scroll\index.vue
-->
<template>
	<view class="box">
		<scroll-view scroll-left="0" scroll-x="true">
			<view class="scroll-item" :class="{'active-item':e.cat_id === currentItem.cat_id}" v-for="(e,i) in list"
				@click="clickItem(e)">
				{{e.cat_name}}
			</view>
		</scroll-view>
		<uni-icons @click="goList" type="list" size="19"></uni-icons>
	</view>

</template>

<script>
	export default {
		props: {
			list: {
				type: Array,
				default () {
					return []
				}
			},
		},
		data() {
			return {
				currentItem: {}
			}
		},
		mounted() {
			this.currentItem = this.list.length && this.list[0]
		},
		methods: {
			clickItem(e) {
				this.currentItem = e
				this.$emit('clickItem', e)
			},
			goList() {
				uni.navigateTo({
					url: '/subpkg/cate_list/cate_list'
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	.box {
		height: 80rpx;
		background-color: #fff;
		display: flex;
		align-items: center;
		padding: 20rpx 16rpx;
		border-radius :20rpx 20rpx 0 0;
	}

	scroll-view {
		width: calc(100% - 60rpx);
		height: 55rpx;
		margin-right: 20rpx;
		white-space: nowrap;
	}

	.scroll-item {
		height: 40rpx;
		display: inline-block;
		font-size: 26rpx;
		padding: 4rpx 20rpx;
		background-color: #F7F8FA;
		margin-right: $baseMarginTop;
		border-radius: 20rpx;
		color: #7F8082;
	}

	.active-item {
		color: #50B192;
		background-color: #ECFBF8;
	}
</style>
